<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<link rel="stylesheet" href="build/conversational-form-docs.min.css">

		<script type="text/javascript" src="https://cf-4053.kxcdn.com/conversational-form/0.9.6/conversational-form.min.js" crossorigin></script>
	</head>

	<body>
		<script src="build/conversational-form-examples.min.js" id="examples-script"></script>

		<script>
			// example specific code
			function addRandomClick(){
				var ran = ["Random message 1", "Random message 2"];
				if(window.ConversationalForm){
					window.ConversationalForm.addRobotChatResponse(ran[Math.floor(Math.random() * ran.length)]);
				}
			}

			const transcript = ["What is the purpose of life?",
				"To serve the greater good.",
				"What is the purpose of living?",
				"To live forever",
				"Where are you now?",
				"I’m in the middle of nowhere.",
				"What is the purpose of dying?",
				"To have a life.",
				"What is the purpose of emotions?",
				"I don’t know",
				"What is moral?",
				"What empowered humanity, what intellectual the essence is",
				"What is immoral?",
				"The fact that you have a child.",
				"What is morality?",
				"What is altruism?",
				"What is the definition of altruism?",
				"If you don’t believe in god, then you don’t know",
				"Ok ... so what is the definition of morality?",
				"Well, the truth is, you’re not a believer in god almighty",
				"Tell me the definition of morality, I am quite upset now!",
				"I’m done!"];

			let transcriptIndex = 0;

			function robotStartsTalkingToItself(){
				var next = transcript[transcriptIndex]
				window.ConversationalForm.addRobotChatResponse(next);
				transcriptIndex++;

				if(transcriptIndex < transcript.length){
					setTimeout(() => {
						robotStartsTalkingToItself();
					}, (next.length / 50) * 1000);
				}
			}

			function initExample(){
				// called from examples code
				robotStartsTalkingToItself();
			}
		</script>


		<main class="content">
			<menu id="small-screen-menu">
				<h2>Conversational Form examples</h2>

				<div class="switch-btn">
					<label class="switch">
						<input type="checkbox" onclick="window.conversationalFormExamples.toggleConversation(event)">
						<div class="slider round"></div>
					</label>
				</div>

				<div class="hamburger-btn" onclick="window.conversationalFormExamples.toggleMenuState(event)">
					<svg viewBox="0 0 29 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
							<g transform="translate(-325.000000, -87.000000)" stroke="#FFFFFF" stroke-width="2">
								<g transform="translate(325.000000, 87.000000)">
									<path d="M27.4802431,7 L1.23827993,7"></path>
									<path d="M27.4802431,1 L1.23827993,1"></path>
									<path d="M27.4802431,13 L1.23827993,13"></path>
								</g>
							</g>
						</g>
					</svg>
				</div>
			</menu>

			<div class="switch-btn" id="cf-toggle-btn" data-label="Enable Conversational Form" data-label-toggled="Disable Conversational Form">
				<label class="switch">
					<input type="checkbox" onclick="window.conversationalFormExamples.toggleConversation(event)">
					<div class="slider round"></div>
				</label>
			</div>

			<section id="info" role="info">
				<div class="close-btn" onclick="window.conversationalFormExamples.toggleMenuState()">
					<svg viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
							<g transform="translate(-328.000000, -83.000000)" stroke="#FFFFFF" stroke-width="2">
								<g id="close" transform="translate(329.000000, 84.000000)">
									<path d="M19.6371966,19.2779351 L1.08132646,0.722064927"></path>
									<path d="M19.4923318,0.722064927 L0.936461672,19.2779351"></path>
								</g>
							</g>
						</g>
					</svg>
				</div>

				<article>
					<h1 id="writer">
						Add random robot response to Conversational Form
					</h1>
					<h2>

					</h2>
				</article>
			</section>

			<section role="form">
				<div class="form-outer">
					<form id="form" cf-form></form>
				</div>
			</section>

			<section id="cf-context" role="cf-context" cf-context>
				
			</section>
		</main>
	</body>
</html>
